<template>
  <div id="cartContainer">
    <div v-if="session" class="cart">
      <!-- 导航 -->
      <NavBar class="nav-bar">
        <div slot="center">购物车({{ cartLength }})</div>
      </NavBar>
      <!-- 商品列表 -->
      <CartList></CartList>
      <!-- 底部汇总 -->
      <CartBottomBar></CartBottomBar>
      <CartImage v-show="cartLength == 0"></CartImage>
    </div>
    <div v-else class="hiddenCart">
      <template>
        <NavBar class="nav-bar">
          <div slot="center">购物车</div>
        </NavBar>
        <CartImage>
          <el-button slot="imgShow" plain class="showSign" @click="toLogin">
            去登录
          </el-button>
        </CartImage>
      </template>
    </div>
  </div>
</template>

<script>
//子组件

import CartList from "./childComps/CartList.vue";
import CartBottomBar from "./childComps/CartBottomBar.vue";
import CartImage from "./childComps/CartImage.vue";
//公共
import NavBar from "components/common/navbar/NavBar";
//外部
import { mapGetters } from "vuex";
export default {
  name: "cart",
  components: {
    NavBar,
    CartList,
    CartBottomBar,
    CartImage
  },
  created() {
    PubSub.subscribe("del", (del, data) => {});
  },
  activated() {
    this.session = localStorage.getItem("status");
    if (!this.session) {
      this.open2();
    }
  },
  computed: {
    // cartLength() {
    //   return this.$store.getters.cartLength;
    // }
    ...mapGetters(["cartLength", "cartList"])
  },
  data() {
    return {
      session: ""
    };
  },
  methods: {
    open2() {
      this.$notify({
        title: "提示",
        message: "请先登录",
        duration: 1500
      });
    },
    toLogin() {
      this.$router.push('/login')
    }
  }
};
</script>

<style lang="css" scoped>
.cart {
  position: relative;
  height: 100vh;
}
.nav-bar {
  background: #e54346;
  color: #fff;
}
.showSign {
  border: none;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-decoration-line: underline;
  transform: translateX(10%);
}
</style>
